import React, { useState } from 'react';
// import { Outlet } from 'react-router-dom';
import LoginLayout from '../components/Login/LoginLayout';
// import { loginData } from '../components/Login/data';
import type { ViewType, LoginLayoutProps } from '../components/Login/LoginLayout';
import { WechatOutlined, DingtalkOutlined, GlobalOutlined, BookOutlined, UserOutlined } from '@ant-design/icons';
import { message, } from 'antd';
import type { FormItem, FormConfig } from '../components/DynamicForm'

const LoginPage: React.FC = () => {
    const [currentView, setCurrentView] = useState<ViewType>('login');
    const handleWechatLogin = () => {
        message.info('企业微信登录');
    }

    const handleDingtalkLogin = () => {
        message.info('钉钉登录');
    }

    const handleExternalLogin = () => {
        // message.info('校外用户登录');
        setCurrentView('outlogin');
    }
    const outLoginSubmit = (values: any) => {
        console.log('outLoginSubmit', values);
    }
    const loginData: LoginLayoutProps = {
        ssoLoginUrl: "http://www.baidu.com",
        currentView: currentView,
        onViewChange: setCurrentView,
        logoText: undefined,
        descriptionText: undefined,
        leftBackgroudImg: 'http://211.87.176.23/lims/cache/3a1e2d26acd813b3b85c58e359490e0f.ico',
        logoUrl: 'http://211.87.176.23/lims/cache/3a1e2d26acd813b3b85c58e359490e0f.ico',
        otherLoginTypes: [
            {
                "key": "wechat",
                "name": "企业微信",
                "icon": <WechatOutlined style={{ color: '#07C160' }} />,
                "onClick": handleWechatLogin
            },
            {
                "key": "dingtalk",
                "name": "钉钉",
                "icon": <DingtalkOutlined style={{ color: '#1E88E5' }} />,
                "onClick": handleDingtalkLogin
            },
            {
                "key": "outLogin",
                "name": "校外登录",
                "icon": <GlobalOutlined style={{ color: '#9C27B0' }} />,
                "onClick": handleExternalLogin
            }
        ],
        outLoginSubmit: outLoginSubmit,
        registerTypeList: [
            {
                key: 'user',
                name: '注册新用户',
                desc: '注册个人账号，管理研究档案、订阅领域动态，获得个性化资源推荐',
                icon: <UserOutlined />,
                formConfig: {
                    items:[
                        {
                            name: 'username',
                            type: 'text' as FormItem['type'],
                            label: 'user用户名',
                            props:{
                                placeholder: '请输入用户名',
                            },
                            rules: [{ required: true, message: '请输入用户名' }],
                        },
                        {
                            name: 'password',
                            type: 'text' as FormItem['type'],
                            label: '密码',
                            props:{
                                placeholder: '请输入密码',
                                type: 'password',
                            },
                            rules: [{ required: true, message: '请输入密码' }],
                        },
                    ],
                    searchBtn: false,
                    itemsPerRow: 1,
                    actionColSpan: 24,
                    layout: 'vertical',
                    submitText: '用户登录',
                    onSubmit: (values: any) => {
                        console.log('user login', values);
                    }
                }
            },
            {
                key: 'group',
                name: '注册新课题组',
                desc: '创建课题组，统一管理实验数据、分配仪器权限、协作发表成果',
                icon: <BookOutlined />,
                formConfig: {
                    items:[
                        {
                            name: 'username',
                            type: 'text' as FormItem['type'],
                            label: '课题组用户名',
                            rules: [{ required: true, message: '请输入用户名' }],
                        },
                        {
                            name: 'password',
                            type: 'text' as FormItem['type'],
                            label: '密码',
                            rules: [{ required: true, message: '请输入密码' }],
                        },
                    ],
                    submitText: '课题组登录',
                    onSubmit: (values: any) => {
                        console.log('group login', values);
                    }
                }
            },
        ],
    }
    return (
        <div>
            <LoginLayout {...loginData} />

        </div>
    );
};

export default LoginPage;